<template>
	<view class="address">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">我的收货地址</block>
		</cu-custom>
		<view class="address-list">
			<view class="list-item" v-for="item in record" :key="item.id">
				<view class="address-info" @click="selectAddress(item)">
					<view class="address-base">
						<text class="name">{{ item.name }}</text>
						<text class="tel">{{ item.tel }}</text>
						<text class="default-icon" v-if="item.is_default == 1">默认地址</text>
						<text class="default-icon take-default" v-if="item.is_default == 0"
							@click="takeDefaults(item.id)">设为默认</text>
					</view>
					<view class="address-map">
						{{ nameText(item) }}
					</view>
				</view>
				<view class="address-action">
					<view class="edit-btn" @tap="addressEdit(item.id)">编辑</view>
					<view class="del-btn" @tap="addressDel(item.id)">删除</view>
				</view>
			</view>
			<uni-load-more :status="more" v-if="record.length > 0"></uni-load-more>
		</view>
		<view class="address-add">
			<button type="default" class="add-btn" @tap="addressEdit()">添加新地址</button>
		</view>
	</view>
</template>

<script>
import shops from '@/api/shop';

export default {
	data() {
		return {
			page: 1,
			type: '', // 用于接收 URL 参数
			more: 'more',
			limit: 10,
			record: [],
		};
	},
	onLoad(option) {
		// 获取 URL 参数
		if (option.type !== undefined) {
			this.type = option.type;
		}
		this.getAddress();
	},
	onShow() {
		this.getAddress();
	},
	methods: {
		selectAddress(address) {
			if (this.type === "select") {
				uni.setStorageSync('selectedAddress', address);
				uni.navigateBack();
			}
		},
		nameText(item) {
			if (!item) return '未知地址';
			let address = item.province + ' ' + item.city + ' ' + item.district + ' ' + item.detail;
			return address.length > 20 ? address.slice(0, 20) + '...' : address;
		},
		addressEdit(aid) {
			let url = 'add';
			if (aid) {
				url = 'add?aid=' + aid;
			}
			uni.navigateTo({ url });
		},
		async addressDel(del_id) {
			let res = await shops.delOnce({ address_id: del_id });
			if (res.code == 1) {
				uni.showToast({ title: '已删除!', icon: 'success' });
				this.getAddress();
			} else {
				uni.showModal({
					title: '提示',
					content: '操作错误!',
					showCancel: false,
				});
			}
		},
		async getAddress() {
			let res = await shops.addressList({ limit: this.limit, page: this.page });
			this.more = res.data.length <= 0 ? 'noMore' : 'more';
			if (res.code == 1) {
				this.record = res.data;
			} else {
				console.log(res.msg);
			}
		},
		async takeDefaults(aid) {
			uni.showLoading({ title: '处理中...' });
			let res = await shops.takeDefaults({ address_id: aid });
			uni.hideLoading();
			if (res.code == 1) {
				uni.showToast({ title: '默认地址已更改！', duration: 2000 });
				this.getAddress();
			} else {
				uni.showModal({
					title: '提示',
					content: '设置失败!',
					showCancel: false,
				});
			}
		}
	}
};
</script>

<style lang="less">
.address {
	background-color: rgb(239, 239, 239);

	.address-list {
		background-color: #ffffff;
		font-size: 28rpx;
		color: #3e3a3a;
		padding: 0 30rpx;

		.list-item {
			border-bottom: 1rpx solid #dcdcdc;
			padding: 15rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.address-info {
				flex: 1;
				padding-right: 15rpx;
				border-right: 1rpx solid #dcdcdc;
			}

			.address-action {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10rpx;

				.edit-btn,
				.del-btn {
					height: 35rpx;
					width: 70rpx;
					text-align: center;
					line-height: 35rpx;
					border-radius: 5rpx;
					color: #ffffff;
				}

				.edit-btn {
					background-color: #4CD964;
					border: 1rpx solid #4CD964;
				}

				.del-btn {
					background-color: #F43F3B;
					border: 1rpx solid #F43F3B;
				}
			}

			.address-base {
				height: 50rpx;
				line-height: 50rpx;

				.default-icon {
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 20rpx;
					text-align: center;
					float: right;
					border-radius: 15rpx;
					background-color: #faebd6;
					color: #ff7302;
				}

				.take-default {
					background-color: #94908f;
					color: #ffffff;
				}
			}

			.name {
				font-size: 35rpx;
				margin-right: 15rpx;
			}

			.tel {
				color: #928d8d;
			}
		}
	}

	.address-add {
		position: fixed;
		width: 100vw;
		bottom: 0;

		button {
			background-color: rgb(252, 7, 4);
			color: #ffffff;
			border-radius: 0;
		}
	}
}
</style>
